<template>
  <div>
    <header>
      <h1 class="w">
        <div class="login_logo"><img src="/img/wlh/logo.png" alt="" /></div>
      </h1>
    </header>
    <!-- 这里没有替换login类名为register是因为该注册新用户页面借用了登录的主题框架 -->
    <div class="login w">
      <div class="download_left">
        <img
          src="http://qnm.hunliji.com/o_1abi34nlkj491upu133a1l86h051a.jpg"
          alt=""
        />
      </div>
      <!-- 只需要修改reg_box内的内容即可 -->
      <div class="reg_box">
        <ul>
          <li class="zhuce .w300">
            <span>注册</span>
            <router-link to="/login">我有账号，点击登录</router-link>
          </li>
          <li class="err w300">{{ errMsg }}</li>
          <li>
            <input
              type="text"
              maxlength="11"
              placeholder="请输入11位的手机号"
              :disabled="!isAgree"
              @blur="testPhone"
              v-model="phone"
            />
            <span :class="{ displayNone: isPhoneCorrect }"></span>
          </li>
          <li>
            <input
              type="password"
              maxlength="16"
              placeholder="请填写6位数字密码"
              :disabled="!isAgree"
              @blur="testPwd"
              v-model="password"
            />
            <span :class="{ displayNone: isPwdCorrect }"></span>
          </li>
          <li>
            <input
              type="password"
              maxlength="16"
              placeholder="请再次填写密码"
              :disabled="!isAgree"
              @blur="testPwd2"
              v-model="password2"
            />
            <span :class="{ displayNone: isPwdEqual }"></span>
          </li>
          <li>
            <input
              type="text"
              placeholder="请输入邮箱"
              :disabled="!isAgree"
              @blur="testEmail"
              v-model="email"
            />
            <span :class="{ displayNone: isEmailCorrect }"></span>
          </li>
          <li>
            <input
              type="text"
              maxlength="11"
              placeholder="请输入真实姓名(6个以内的汉字)"
              :disabled="!isAgree"
              @blur="testName"
              v-model="uname"
            />
            <span :class="{ displayNone: isNameCorrect }"></span>
          </li>
        </ul>
        <div class="btn w300">
          <input
            type="button"
            value="点击注册"
            id="dologin"
            @click="RegisterCount"
            :disabled="!isAgree"
          />
        </div>
        <div class="txt w300">
          <label for=""
            ><input
              type="checkbox"
              class="i_agree"
              id="agree"
              v-model="isAgree"
            />我同意</label
          >
          <a href="#">《婚礼纪用户协议》</a>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<style scoped>
@import url(/css/register.css);
</style>
<script>
export default {
  data() {
    return {
      isAgree: false,
      errMsg: "请您按照提示操作：",
      isPhoneCorrect: true,
      isPwdCorrect: true,
      isEmailCorrect: true,
      isNameCorrect: true,
      isPwdEqual: true,
      phone: "",
      password: "",
      password2: "",
      email: "",
      uname: "",
    };
  },
  methods: {
    // 1.封装一个验证手机号格式的函数
    testPhone() {
      // 创建手机号的正则表达式
      var phone_reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
      var result = phone_reg.test(this.phone);
      if (result) {
        // 当手机号格式正确时显示对钩提示用户输入正确格式
        this.isPhoneCorrect = false;
        this.errMsg = "手机号格式正确";
      } else {
        this.isPhoneCorrect = true;
        // 去掉其displayNone的类名让其显示出来
        this.errMsg = "请输入一个格式正确的手机号";
      }
    },
    // 2.封装一个验证密码格式的函数
    testPwd() {
      // 创建密码的正则表达式
      var pwd_reg = /^[0-9]{6}$/;
      var result = pwd_reg.test(this.password);
      if (result) {
        this.isPwdCorrect = false;
        this.errMsg = "密码格式正确";
      } else {
        this.isPwdCorrect = true;
        this.errMsg = "请输入6位数字的密码";
      }
    },
    // 3.封装一个验证两次密码是否一致的函数
    testPwd2() {
      if (this.password == "") {
        this.isPwdEqual = true;
        this.errMsg = "密码不能为空！";
      } else if (this.password == this.password2) {
        this.isPwdEqual = false;
        this.errMsg = "两次输入的密码一致！";
      } else {
        this.isPwdEqual = true;
        this.errMsg = "两次输入的密码不同请重新填写！";
      }
    },
    // 4.封装一个验证邮箱格式的函数
    testEmail() {
      // 邮箱正则表达式
      var email_reg = /^[0-9a-zA-Z.-_]+@[0-9a-zA-Z.-_]+(\.[a-zA-Z]+){1,2}$/;
      // 验证邮箱格式
      if (email_reg.test(this.email)) {
        // 当邮箱格式正确时
        this.isEmailCorrect = false;
        this.errMsg = "邮箱格式正确！";
      } else {
        // 邮箱格式错误时
        this.isEmailCorrect = true;
        this.errMsg = "邮箱格式错误！";
      }
    },
    // 5.封装函数验证真实姓名格式
    testName() {
      // 邮箱正则表达式
      var name_reg = /^[\u4E00-\u9FA5]{2,10}$/;
      // 验证邮箱格式
      if (name_reg.test(this.uname)) {
        // 当邮箱格式正确时
        this.isNameCorrect = false;
        this.errMsg = "用户名格式正确！";
      } else {
        // 邮箱格式错误时
        this.isNameCorrect = true;
        this.errMsg = "用户名格式错误！请输入至少2个汉字！";
      }
    },
    // 6.封装
    RegisterCount() {
      // 当所有的必填项都填写正确时才发送服务器请求进行账户注册
      if (
        this.isNameCorrect &&
        this.isPhoneCorrect &&
        this.isPwdCorrect &&
        this.isEmailCorrect &&
        this.isPwdEqual
      ) {
        // 用户没有按要求填写好信息不予以注册
        this.errMsg = "请您先填写正确格式的信息后进行注册!";
      } else {
        // 0.打包数据
        var obj = {
          phone: this.phone,
          upwd: this.password,
          email: this.email,
          user_name: this.uname,
        };
        // 一切就绪发送请求
        this.axios({
          method: "post",
          url: "/user/reg",
          data: obj,
        }).then((result) => {
          if (result.data.code == 200) {
            alert("注册成功!");
            // 登录成功后跳转到登录页面
            window.open("http://localhost:8080/#/login", "_self");
          } else {
            alert("服务器端错误!注册失败!");
          }
        });
      }
    },
  },
};
</script>